<template>
	<div id="app">
		<div class="container">
			<div v-for="(product, index) in productList" :key="index" class="product-item">
				<div class="product-content">
					<!-- 商品图片区域（等待后端传图） -->
					<div class="product-image">
						<image :src="product.medicineCover" style="height: 100px;"></image>
					</div>

					<div class="product-info">
						<div>
							<!-- 药品名称 -->
							<div class="product-title">{{ product.medicineName }}</div>

							<!-- 药品功效 -->
							<div class="product-type">药品功效: {{ product.medicineEfficacy }}</div>

							<!-- 药品类型 -->
							<div class="product-type">药品类型: {{ product.medicineUsage }}</div>

						</div>

						<div class="price-section">
							<!-- 价格信息 -->
							<div>
								<span class="current-price">￥{{ product.medicinePrice }}</span>
								<span class="badge" @click="cancelCollection(product)">取消收藏</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<view>
			<u-toast ref="uToast" />
		</view>

	</div>
</template>
<script>
	import {
		queryGoods,
		deleteGoods
	} from '@/api/concern.js'
	import store from '../../store';
	export default {
		data() {
			return {
				productList: []
			}
		},
		methods: {
			// 查询商品收藏
			queryMessage() {
				queryGoods({
					userId: this.$store.state.userId
				}).then((res => {
					console.log(res)
					this.productList = res.rows
				}))
			},
			cancelCollection(product) {
				deleteGoods({
					collectionId: product.collectionId
				}).then((res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
						})
						this.queryMessage();
					}
				}))
			}
		},
		mounted() {
			this.queryMessage();
		}
	}
</script>
<style>
	body {
		background-color: #f7f7f7;
		font-family: PingFang SC, Arial, sans-serif;
		padding: 0;
		margin: 0;
	}

	.container {
		padding: 15px;
		max-width: 600px;
		margin: 0 auto;
	}

	.product-item {
		background: #fff;
		border-radius: 10px;
		margin-bottom: 15px;
		padding: 15px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	}

	.product-content {
		display: flex;
	}

	.product-image {
		width: 100px;
		height: 100px;
		background: #f5f5f5;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 12px;
	}

	.product-info {
		flex: 1;
		margin-left: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-title {
		font-size: 15px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.product-type {
		font-size: 13px;
		color: #666;
		margin-bottom: 5px;
	}

	.sales-count {
		font-size: 12px;
		color: #999;
		margin-bottom: 8px;
	}

	.price-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.current-price {
		color: #e43d33;
		font-weight: bold;
		font-size: 16px;
	}

	.original-price {
		color: #999;
		font-size: 13px;
		text-decoration: line-through;
		margin-left: 8px;
	}

	.badge {
		background: #fff0f0;
		color: #e43d33;
		font-size: 12px;
		padding: 2px 6px;
		border-radius: 3px;
		margin-left: 8px;
	}
</style>